<!DOCTYPE html>
<html>
<head>
    <title>个人风采</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css ">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css ">
    <link rel="stylesheet" href="https://jqweui.cn/dist/demos/css/demos.css ">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_587767_rj4fkdnklqttvs4i.css ">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js "></script>
    <style type="text/css">
        #feedback {
            height: 200px;
            text-align: center;
            height: 160px;
            border: 1px solid silver;
            border-radius: 3px;
        }

        #feedback img {
            margin: 3px 10px;
            border: 1px solid silver;
            border-radius: 3px;
            padding: 6px;
            width: 35%;
            height: 85%;
        }

        #feedback p {
            font-family: "微软雅黑";
            line-height: 120px;
            color: #ccc;
        }

        .file {
            position: relative;
            display: inline-block;
            border: 1px solid #1ab294;
            border-radius: 4px;
            padding: 8px 16px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            color: #1ab294;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .box {
            margin-top: 10px;
            text-align: center;
        }

        .box a {
            margin-left: 10px;
        }
    </style>
</head>
<body ontouchstart style="background: #eeefef">
<form  method="post" action="{:url('Teacher/teacher')}" enctype="multipart/form-data" id="form">
<!--头部开始-->
<div class="weui-flex" style="border-bottom: 1px solid gainsboro;background: #FCFCFC;height: 45px">
    <div class="weui-flex__item" style="margin-top: 15px;">
        <div class="placeholder" style="margin-left: 10px;margin-top: -5px;">
            <a href="{:url('portal/teacher/teacher')}"><span  style="color: #04BE02;" onclick="history.back()" class="icon  icon-back"></span>
            </a></div>
    </div>

    <div class="weui-flex__item">
        <div class="placeholder" style="margin-left: 40px;text-align: center;margin-top: 10px; color: #404040;">个人风采</div>
    </div>

    <div class="weui-flex__item">
        <div class="placeholder"></div>
    </div>
    <div class="save">
        <input type="submit" name="grzl2" value="保存" style="border:none;margin-top: 15px;margin-right: 10px;font-size: 14px;color: #04BE02;background-color: #ffffff">
    </div>
</div>
<!--头部结束-->

<div class="weui-gallery" id="gallery">
    <span class="weui-gallery__img" id="galleryImg"></span>
    <div class="weui-gallery__opr">
        <a href="javascript:" rel="external nofollow" class="weui-gallery__del">
            <i class="weui-icon-delete weui-icon_gallery-delete"></i> </a>
    </div>
</div>


    <div class="weui-cells weui-cells_form" style="margin-top: 8px">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title" style=" color: #5b5b5b;font-weight: 500; font-size: 14px;line-height: 22px;">图片上传</p>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                            <if condition="$pic eq ''">
                                <else />
                                <volist name="pic" id="vo">
                                    <li class="weui-uploader__file" id="{$vo.id}" style="background-image:url(__UPLOADS__{$vo.picture_path})"></li>
                                </volist>
                            </if>

                        </ul>
                        <div class="weui-uploader__input-box">
                            <input name="image2" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

       <!-- <div class="weui-btn-area">
            <input class="weui-btn weui-btn_primary" type="submit" name="grzl2" value="确定">
        </div>-->
    </div>

</form >
<script src="__TMPL__/public/assets/js/jquery-2.1.4.js"></script>
<script src="__TMPL__/public/assets/js/fastclick.js"></script>
<script src="__TMPL__/public/assets/js/mui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-weui/1.2.0/js/jquery-weui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-weui/1.2.0/js/city-picker.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
<script>
    mui.init();
    $(function() {
        FastClick.attach(document.body);
        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
                $gallery = $("#gallery"),
                $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles");
        $uploaderInput.on("change", function(e) {
            console.log('2');
            var src, url = window.URL || window.webkitURL || window.mozURL,
                    files = e.target.files;
            console.log(files);
            for(var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                if(url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }
                var formData = new FormData(document.getElementById("form"));//表单id
                console.log(formData);
                $.ajax({
                    url: '{:url("portal/teacher/up")}' ,
                    type: 'POST',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        console.log(result);
                        if(result==1){
                            $uploaderFiles.append($(tmpl.replace('#url#', src)));
                        }

                    }
                });


            }
        });
        var index; //第几张图片
        $uploaderFiles.on("click", "li", function() {
            console.log('3');
            index = $(this).index();
            console.log(index);
            $galleryImg.attr("style", this.getAttribute("style"));
            console.log('4');
            $gallery.fadeIn(100);
            console.log('5');
        });
        $gallery.on("click", function() {
            $gallery.fadeOut(100);
        });
        //删除图片 删除图片的代码也贴出来。
        $(".weui-gallery__del").click(function() { //这部分刚才放错地方了，放到$(function(){})外面去了
            console.log('删除');
            //拿到当前li的id
            console.log($uploaderFiles.find("li").eq(index).attr("id"));
            var li = $uploaderFiles.find("li").eq(index).attr("id");
            $.ajax({
                url:'{:url("portal/teacher/photos_del")}',
                data:{"f":li},
                type:"POST",
                dataType:"json",
                success:function(result){
                    console.log(result);
                    if(result==1){
                        $uploaderFiles.find("li").eq(index).remove();
                    }

                }
            });

        });
    });
/*    $("#home-city").cityPicker({
        title: "选择目的地",
        showDistrict: false,
        onChange: function (picker, values, displayValues) {
            console.log(values, displayValues);
        }
    });
    $(".weui-btn").click(function () {
        if($(".weui-input").val()==""){
            alert("请将信息填写完整");
        }
        else {
            window.location.href="{:url('Teacher/t2')}";
        }
    });*/
</script>

</body>
</html>